import React, { Component } from "react";
import { Layout, Menu, Breadcrumb, Icon } from "antd";
import { Route, Switch, Link, Redirect, withRouter } from "react-router-dom";
import "../style/rentigateway.less";
import Canvas from '../../Canvas'
const { Header, Content, Sider } = Layout;


@withRouter
export default class RentiGateway extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      biaoZhunRenTiKu_show: false,
      renTiRuKu_show: false,
      renTiJianSuo_show: false
    };
  }
  render() {
    const { menuList, routers } = this.props;
    return (
      <React.Fragment>
        <Canvas />
        <Layout theme="dark" className="ren_ti_layout">
          <Header className="rentiHeader">
            <div className="header_logo"></div>
            <div className="header_describe">云粒人体搜索引擎</div>
            <div className="human_body_storage_icon"></div>
            <div
              className="human_body_search_describe"
              onClick={() => {
                this.props.history.push("/Human_body_database_management");
                this.setState(prevState => ({
                  biaoZhunRenTiKu_show: false,
                  renTiRuKu_show: true,
                  renTiJianSuo_show: false
                }));
              }}
            >
              人体库管理
            {this.state.renTiRuKu_show && (
                <div className="human_body_search_describe_line"></div>
              )}
            </div>
            <div className="human_body_search_icon"></div>
            <div
              className="human_body_search_describe"
              onClick={() => {
                this.props.history.push("/Human_body_search");
                this.setState(prevState => ({
                  biaoZhunRenTiKu_show: false,
                  renTiRuKu_show: false,
                  renTiJianSuo_show: true
                }));
              }}
            >
              人体检索
            {this.state.renTiJianSuo_show && (
                <div className="human_body_search_describe_line"></div>
              )}
            </div>
          </Header>
          <Layout className="renti_content">
            <Switch>
              {routers.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.render}
                />
              ))}
              <Redirect from="/" to={routers[0].path} />
            </Switch>

          </Layout>
        </Layout>
      </React.Fragment>

    );
  }
}
